---
import type Frontmatter from "@/declare/Frontmatter";
import ParseTime from "@/utils/ParseTime";
import { SortCollectArticles } from "@/utils/SortArticle";
import { getCollection } from "astro:content";
import cfg from "blog.config";

export interface Props {
  horizontal?: boolean;
}
const { horizontal } = Astro.props;
const ArticleList = SortCollectArticles<"blog">(
  await getCollection("blog", ({ data }) => data.draft !== true)
).slice(0, horizontal ? 3 : 5);
---

<div class={`recent_article ${horizontal ? "horizontal" : "vertical"}`}>
  {
    ArticleList.map((val) => {
      return (
        <a
          class="item"
          href={`${cfg.WebsiteSettings.base}/posts/${val.data.title}`}
        >
          <div class="title text_nowrap w100">{val.data.title}</div>
          <div class="time text_nowrap w100">{ParseTime(val.data.date)}</div>
        </a>
      );
    })
  }
</div>

<style lang="scss">
  .recent_article {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;

    &.horizontal {
    }
    &.vertical {
      .item {
        height: 3.6rem;
      }
    }
    .item {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      height: 33.33%;
      padding: 0.4rem;
      transition: background-color 0.1s;

      .title {
        color: var(--text-default);
      }
      .time {
        color: #555;
        font-size: 0.86rem;
      }

      &:hover {
        background-color: var(--background-active-default);
        cursor: pointer;
      }
    }
  }
</style>
